<html>
<head>
<title>Update profile</title>
<link href="../resources/css/updateProfileStyle.css" rel="stylesheet"
	type="text/css">
<script language="JavaScript" type="text/javascript">
	function counter(campo, cuentacampo, limite) {
		if (campo.value.length > limite)
			campo.value = campo.value.substring(0, limite);
		else
			cuentacampo.value = limite - campo.value.length;
	}
</script>
</head>

<body>
	<div>
		<img id="background" src="/webapp/resources/images/background.jpg"
			alt="" title="" />
	</div>
	<div id="fixed">
	<h2>Profile</h2>
	<h6>* Obligatory information</h6>
	<h5>$!{errorMsg} $!{successMsg}</h5>
	<form action="update.do" method="POST">
		<input type="hidden" name="action" value="update" />
		<input type="hidden" name="id" value="${user.id}" /> 
		<input type="hidden" value="${user.id}" /> 
		<input type="hidden" name="enabled" value="${user.enabled}" /> 
		<input type="hidden" name="editWho" value="${action}" >
		<input type="hidden" name="emailModified" value="${user.email}" /> 
	<table>
		<tr>
			<td>
				Name:
			</td>
			<td>
				<input type="text" name="name" value="$!{user.name}" required /> *
			</td>
		</tr>
		<tr>
			<td>
				Company:
			</td>
			<td>
				<input type="text" name="company" value="$!{user.company}" /> 
			</td>
		</tr>
		<tr>
			<td>
				Job Title:
			</td>
			<td>
				<input type="text" name="jobTitle" value="$!{user.jobTitle}" />
			</td>
		</tr>
		<tr>
			<td>
				E-mail:
			</td>
			<td>
				 <input type="email" name="email" value="$!{user.email}" required />*
			</td>
		</tr>
		<tr>
			<td>
				Password:
			</td>
			<td>
				 <input type="password" name="password" value="$!{user.password}" required />*
			</td>
		</tr>		
		<tr>
			<td>
				Experience:
			</td>
			<td>
				 <textarea name="experience" cols="60" rows="8" maxlength="500"
			wrap="physical" onfocus="counter(this.form.experience,this.form.remLen,500);"
			onKeyDown="counter(this.form.experience,this.form.remLen,500);"
			onKeyUp="counter(this.form.experience,this.form.remLen,500);">$!{user.experience}</textarea>
			</td>
		</tr>
		<tr>
			<td>
				Characters Left:
			</td>
			<td>
				 <input type="text" name="remLen" size="3" maxlength="3" value="500" readonly />
			</td>
		</tr>
		<tr>
			<td>
				Languages:
			</td>
			<td>
				 <ul id="languages">
					#foreach($language in $availableLanguages)
						<li><input type="checkbox" name="languages" value="${language}" #foreach($l in $user.languages)
			        			#if(${l.language} == ${language}) checked="true" #end #end />${language}
						</li> 
					#end
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				Access:
			</td>
			<td>
				 <select name="accessType" value="${user.accessType.role}">
				<option value="ROLE_ADMIN" #if($user.accessType.role=='ROLE_ADMIN')SELECTED#end>ADMIN</option>
			    <option value="ROLE_USER" #if($user.accessType.role==
				'ROLE_USER')SELECTED#end>USER</option>
		        </select>
			</td>
		</tr>				
	</table>
	</br></br>
	<input type="submit" value="Done" />
	
	</form>
	<nav>
		<ul id="navi">
				<li><a href="dashboard.do">Cancel</a></li>
		</ul>
	</nav>
</div>
</body>
</html>